import * as React from 'react';
import {
    Image,
    StyleSheet,
    Text,
    View,
} from 'react-native';
import { IconModel } from './icon-model';

interface IIconItemProps {
    iconItem: IconModel
}

class IconItem extends React.Component<IIconItemProps>{
    public render() {
        const { text, icon } = this.props.iconItem || {}
        return (
            <View style={styles.container}>
                <Image resizeMode='contain' style={styles.icon} source={{ uri: icon }} />
                <Text style={styles.text}>{text}</Text>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        alignItems:'center',
    },
    text: {
        fontSize: 12,
        color: 'black',
        marginTop: 10
    },
    icon: {
        width: 28,
        height: 28
    }
});

export default IconItem